<template>
  <div class="video_play">
    <div id="Flash1" ref="flash1">
      <div ref="videoRef" id="dplayer"></div>
    </div>
    <!-- <video id="videoElement" :src="video_url" class="w-500px" controls /> -->

    <div class="info_wrap">
      <div class="title_wrap">
        <div class="title">商业秘密管理体系建设1111</div>
        <div class="collect_box" @click="switch_icon">
          <!-- <img v-show="!show" src="/static/collect.png" alt="">
				<img v-show="show" src="/static/collect_active.png" alt=""> -->
          <SvgIcon
            :name="collect ? 'hongxin' : 'huixin'"
            color="#bb0615"
            width="30px"
            height="30px"
          />
          <div class="ml-5px text-18px">25</div>
        </div>
      </div>
      <div class="time">2024.06.17 | 145次观看</div>
      <div class="">
        <div class="label">【课程主要内容】</div>
        <ul>
          <li v-for="(item, index) in info.main" :key="index">{{ item }}</li>
        </ul>
      </div>
      <div class="">
        <div class="label">【主讲人】张杰</div>
        <ul>
          <li v-for="(item, index) in info.main" :key="index">{{ item }}</li>
        </ul>
      </div>
      <div class="detail">{{ info.detail + info.detail }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import DPlayer from "dplayer";
import {
  ref,
  reactive,
  onBeforeUnmount,
  onMounted,
  watch,
  nextTick,
} from "vue";
import {} from "vue-router";
import { get_video, video_detail } from "@/api/index";

const collect = ref(false);
const icon_name = ref("huixin");
const videoRef = ref();
const video_url = ref();
const flash1 = ref();
const info = ref({
  main: [
    "商业秘密相关法律规定",
    "商业秘密管理体系",
    "人力资源知识产权与保密管理",
  ],
  person: [
    "成都九鼎天元科技咨询有限公司副总经理",
    "成都九鼎天元科技咨询有限公司副总经理",
    "成都九鼎天元科技咨询有限公司副总经理",
    "成都九鼎天元科技咨询有限公司副总经理",
    "成都九鼎天元科技咨询有限公司副总经理",
    "成都九鼎天元科技咨询有限公司副总经理",
  ],
  detail:
    "毕业于吉林大学生物技术专业，了解各行业企业管理与生产流程，具有丰富的管理体系构建经验，尤擅长根据不同企业的具体情况针对性的建立管理体系，曾为五十余家企业提供生产许可及ISO管理体系认证咨询服务；为科伦药业、新筑路桥、苑东生物、大西洋焊接、紫光华山、铁骑力士、威特龙消防、九洲电子、华丰企业集团、四川永贵等百余家各行业领先企业提供了贯标咨询与管理培训服务，参与三十余次知识产权管理体系认证审核工作。",
});
const dp = ref();
const video_time = ref(0);

const initDPlayer = (url, currentTime = 1) => {
  if (!dp.value) {
    dp.value = new DPlayer({
      container: document.getElementById("dplayer"),
      autoplay: false, // 进入页面自动播放无效，是因为浏览器限制需要把音量设置为0
      screenshot: true,
      loop: true,
      theme: "red",
      preload: "auto",
      volume: 30,
      video: {
        url: url,
        type: "mp4",
      },
    });
    videoRef.value.style.clientHeight = "100vh";
    videoRef.value.style.clientWidth = "100vw";
    dp.value.on("ended", function (val) {
      video_time.value = val.timeStamp;
      console.log("player ended", val.timeStamp);
    });
  } else {
    dp.value.switchVideo({ url: video_url.value, type: "mp4" });
    dp.value.seek(video_time.value);
    // dp.value.play();
  }
};

const rangeVideo = async (totalSize, chunkSize) => {
  const numChunks = Math.ceil(totalSize / chunkSize);
  let chunk = new Blob();
  let index = 0;

  send();
  async function send() {
    if (index >= 2) return;
    const start = index * chunkSize;
    const end = Math.min(start + chunkSize - 1, totalSize - 1);
    const params = {
      video_id: 1,
    };
    const { data } = await axios.get("/video/get_video", {
      headers: { Range: `bytes=${start}-${end}` },
      params,
      responseType: "blob",
    });
    console.log('xxxx', data);
    send();
    chunk = new Blob([chunk, data], { type: "video/mp4" });
    const url = URL.createObjectURL(chunk);
    // const currentTime = video.currentTime;
    video_url.value = url;
    index++;
    initDPlayer(url);
  }
};
const fetchVideoDetail = async () => {
  const params = {
    video_id: 1,
  };
  const { data } = await video_detail(params);
  rangeVideo(data.size, data.piece_size);
};
fetchVideoDetail();

const switch_icon = () => {
  collect.value = !collect.value;
};
</script>

<style scoped lang="scss">
.info_wrap {
  padding: 10px 30px;

  .btn-wrap {
    // width: 750px;
    position: fixed;
    padding: 0 20px;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
    height: 150px;
    background-color: #eee;

    .btn {
      margin-top: 40px;
      margin-left: 30px;
      width: 690px;
      background-color: #1296db;
      height: 80px;
      border-radius: 35px;
      text-align: center;
      line-height: 80px;
      color: #fff;
      font-size: 36px;
    }
  }

  .title_wrap {
    display: flex;
    justify-content: space-between;
    // align-items: center;

    .title {
      margin-top: 20px;
      margin-bottom: -20px;
      font-size: 26px;
      font-weight: 600;
    }

    .collect_box {
      margin-right: 30px;
      margin-top: 20px;
      cursor: pointer;

      img {
        width: 50px;
      }

      .collect {
        text-align: center;
      }
    }
  }

  .time {
    margin-bottom: 20px;
    font-size: 20px;
    color: #999;
  }

  .label {
    margin: 10px 0;
    font-size: 20px;
    font-weight: 600;
  }

  li {
    line-height: 54px;
    font-size: 18px;
  }

  .detail {
    padding-bottom: 200px;
    margin-top: 10px;
    text-indent: 2em;
    font-size: 20px;
    line-height: 50px;
    text-align: justify;
  }
}
</style>
